<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="2">
          FileName:
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入导出的文件名称" prefix-icon="el-icon-document" v-model="fileName"></el-input>
        </el-col>
        <el-col style="margin-left: 10px;" :span="3">
          Cell Auto-Width:
        </el-col>
        <el-col :span="5">
          <el-radio v-model="autowidth" :label="0" border>True</el-radio>
          <el-radio v-model="autowidth" :label="1" border>False</el-radio>
        </el-col>
        <el-col style="margin-left: 10px;" :span="3">
          Book Type
        </el-col>
        <el-col :span="3">
          <el-select v-model="type">
            <el-option label="xlsx" value="xlsa"></el-option>
            <el-option label="csv" value="csv"></el-option>
            <el-option label="txt" value="txt"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <p style="padding-bottom: 10px;">
        <el-button :loading="isLoading" type="primary" @click="exportExcel">方法一导出Ecxel</el-button>
        <el-button :loading="isLoading" type="primary" @click="exportExcel_1">方法二导出Ecxel（仅可导出xlsx格式）</el-button>
      </p>
      <el-table :data="tableList" border id="outTable">
        <el-table-column label="Order" width="100px">
          <template slot-scope="scope">
            {{scope.$index}}
          </template>
        </el-table-column>
        <el-table-column label="Id" prop="serialNumber" width="100px"></el-table-column>
        <el-table-column label="Title" prop="title"></el-table-column>
        <el-table-column label="Author" width="100px">
          <template slot-scope="{row}">
            <el-tag>{{row.author}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="Readings" prop="readings" width="100px"></el-table-column>
        <el-table-column label="Date" prop="date" width="120px"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
export default {
  data() {
    return {
      tableList: [],
      fileName: 'Excel',
      autowidth: 0,
      type: 'xlsx',
      isLoading: false,
      online: {}
    }
  },
  methods: {
    async getTableList() {
      if(!this.$store.state.method) {
        this.online.method = false
      }else {
        this.online.method = true
      }
      const res = await this.$http.get('edit/article', { params: this.online })
      res.response.forEach(item => {
        if(!this.online.method) {
          item.date = item.date.$date.split('T')[0]
          return
        }
        item.date = item.date.split('T')[0]
      })
      this.tableList = res.response
    },
    exportExcel() {
      this.isLoading = true
      import('@/assets/js/Export2Excel').then(excel => {
        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        const filterVal = ['id', 'title', 'author', 'readings', 'date']
        const list = this.tableList
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.fileName,
          autoWidth: this.autowidth,
          bookType: this.type
        })
        this.isLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'date') {
          return v[j].split('T')[0]
        } else {
          return v[j]
        }
      }))
    },
    exportExcel_1() {
      var xlsxParam = { raw: true }
      var wb = XLSX.utils.table_to_book(document.querySelector('#outTable'), xlsxParam)
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream;charset=utf-8' }),
          this.fileName + '.xlsx'
        )
      } catch(e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    }
  },
  created() {
    this.getTableList()
  }
}
</script>

<style scoped>
  .el-row{
    margin-bottom: 20px;
  }
</style>
